<template>
  <layout>
    <Form ref="form1" :model="dataQuery" :label-width="120">

      <Row class="query-form" style="padding-top: 15px">
        <Col span="8">
          <FormItem label='企业名称：'>
            <cascaderDom ref="trainOrg" @setOrgInfo="setOrgId" @setOrgname="setOrgName" style="width: 100%;"
                         :currentOrgId="dataQuery.companyId" :currentOrgName="dataQuery.companyName"
                         :orgTree="true"></cascaderDom>
          </FormItem>
        </Col>
        <Col span="8" offset="8">
          <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
      </Row>
    </Form>
    <Row>
      <Col span="24">
        <Card dis-hover>
          <p>安全审计分数年度分数统计</p>
          <div id="companyEchart" class="companyEcharts"></div>
        </Card>
      </Col>
    </Row>
    <Row style="margin-top: 10px" :gutter="8">
      <Col span="12">
        <Card dis-hover class="card">
          <Tabs style="margin-top: 10px">
            <Tab-pane label="基础标准">
              <Row v-for="item in scoringRate.basicsList" :gutter="5">
                <Col span="21">{{item.categoryName}}:{{item.factorName}}</Col>
                <Col span="3">{{item.score}}%</Col>
              </Row>
            </Tab-pane>
            <Tab-pane label="现场标准">
              <Row v-for="item in scoringRate.sceneList" :gutter="5">
                <Col span="21">{{item.categoryName}}:{{item.factorName}}</Col>
                <Col span="3">{{item.score}}%</Col>
              </Row>
            </Tab-pane>
            <Tab-pane label="班组标准">
              <Row v-for="item in scoringRate.teamList" :gutter="5">
                <Col span="21">{{item.categoryName}}:{{item.factorName}}</Col>
                <Col span="3">{{item.score}}%</Col>
              </Row>
            </Tab-pane>
          </Tabs>
          <div style="position: absolute;top: 35px;right: 20px;">
            <Date-picker v-model="dataQuery.year" @on-change="setYear" type="year" placeholder="选择年"
                         style="width: 150px"></Date-picker>
          </div>
          <div style="position: absolute;top: 10px; left:50%;margin-left:-49px;font-size: 15px;font-weight:800">
            <span>项目最低得分率</span>
          </div>
        </Card>
      </Col>
      <Col span="12" >
        <Card dis-hover class="card">
          <Tabs style="margin-top: 10px">
            <Tab-pane label="基础标准">
              <Row v-for="item in seriousProject.basicsList" :gutter="5" :style="{color:item.num > 2?'red':'#FF9800'}">
                <Col span="21" >{{item.categoryName}}:{{item.factorName}}</Col>
                <Col span="3">{{item.num}}</Col>
              </Row>
            </Tab-pane>
            <Tab-pane label="现场标准">
              <Row v-for="item in seriousProject.sceneList" :gutter="5" :style="{color:item.num > 2?'red':'#FF9800'}">
                <Col span="21" >{{item.categoryName}}:{{item.factorName}}</Col>
                <Col span="3">{{item.num}}</Col>
              </Row>
            </Tab-pane>
            <Tab-pane label="班组标准">
              <Row v-for="item in seriousProject.teamList" :gutter="5" :style="{color:item.num > 2?'red':'#FF9800'}">
                <Col span="21" >{{item.categoryName}}:{{item.factorName}}</Col>
                <Col span="3">{{item.num}}</Col>
              </Row>
            </Tab-pane>
          </Tabs>
          <div style="position: absolute;top: 10px; left:50%;margin-left:-49px;font-size: 15px;font-weight:800">
            <span>重复出现扣分项目</span>
          </div>
        </Card>
      </Col>
    </Row>
  </layout>
</template>

<script>
import {
  Api
} from '../../../../api/index.js'
import echarts from 'echarts';
import {sessionStorage} from '../../../../common/cacheUtils.js';
import cascaderDom from '../../../../components/cascader-dom.vue';

export default {
  name: "auditCompany",
  components: {cascaderDom},
  data() {
    return {
      dataQuery: {
        companyId: sessionStorage('userId').getObject('userId').companyId,
        companyName: sessionStorage('userId').getObject('userId').companyName,
        year:'',
      },
      scoringRate :{
        basicsList:[],
        sceneList:[],
        teamList:[],
      },
      seriousProject:{
        basicsList:[],
        sceneList:[],
        teamList:[],
      },

      options: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {},
        color: ['#FD5C50', '#FF9800', '#FDD835', '#40C4FF', '#FF3E80', '#42A5F5', '#FFC310', '#1DE9B6', '#6666CC', '#66CC66', '#16CF52', '#22CA66'],
        legend: {
          data: ['基础标准得分', '现场标准得分', '班组标准得分', '综合得分']
        },
        xAxis: [
          {
            type: 'category',
            data: ['2021'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '得分',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value} '
            }
          },
          {
            type: 'value',
            name: '综合分数',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value} '
            }
          }
        ],
        series: [
          {
            name: '基础标准得分',
            type: 'bar',
            data: [0]
          },
          {
            name: '现场标准得分',
            type: 'bar',
            data: [0]
          },
          {
            name: '班组标准得分',
            type: 'bar',
            data: [0]
          },
          {
            name: '综合得分',
            type: 'line',
            data: [0]
          }
        ]
      },
    }
  },
  mounted() {

    this.query();

  },
  methods: {
    setYear(y) {
     this.dataQuery.year = y;
     this.queryScoringRate();
    },
    queryScoringRate(){
      let _this = this;
      _this.scoringRate.basicsList = [];
      _this.scoringRate.sceneList = [];
      _this.scoringRate.teamList = [];
      let url = Api.queryRankScoringRate
      this.$http.get(url,{params:{companyId:this.dataQuery.companyId,year:this.dataQuery.year,state:'1'}}).then((res) => {

        if (res.data.status == 200){
          _this.scoringRate.basicsList = res.data.data;
        }

      }).catch(e => {
        this.$Message.error("数据获取失败")
      })
      this.$http.get(url,{params:{companyId:this.dataQuery.companyId,year:this.dataQuery.year,state:'2'}}).then((res) => {
        if (res.data.status == 200){
          _this.scoringRate.sceneList = res.data.data;
        }
      }).catch(e => {
        this.$Message.error("数据获取失败")
      })
      this.$http.get(url,{params:{companyId:this.dataQuery.companyId,year:this.dataQuery.year,state:'3'}}).then((res) => {
        if (res.data.status == 200) {
          _this.scoringRate.teamList = res.data.data;
        }
      }).catch(e => {
        this.$Message.error("数据获取失败")
      })

    },
    querySeriousProject(){
      let _this = this;
      _this.seriousProject.basicsList = [];
      _this.seriousProject.sceneList = [];
      _this.seriousProject.teamList = [];
      let url = Api.queryRankSeriousProject
      this.$http.get(url,{params:{companyId:this.dataQuery.companyId}}).then((res) => {
        if (res.data.status == 200){
          _this.seriousProject.basicsList = res.data.data.basics;
          _this.seriousProject.sceneList = res.data.data.scene;
          _this.seriousProject.teamList = res.data.data.team;
        }
        // if (res.data.status == 202){
        //   this.$Message.warning("该公司没有重复出现的审计项目")
        // }

      }).catch(e => {
        this.$Message.error("数据获取失败")
      })
    },


    formatDate(date, fmt) {
      if (!(date instanceof Date)) return date;
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      };
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + '';
          fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str));
        }
      }
      return fmt;

      function padLeftZero(str) {
        return ('00' + str).substr(str.length);
      }
    },
    query() {
      this.dataQuery.year =  this.formatDate(new Date(),'yyyy');
      this.$refs.trainOrg.setCurrentOrg();
      this.queryEcharts();
      this.queryScoringRate();
      this.querySeriousProject();
    },
    setOrgId(data) {
      this.$set(this.dataQuery, 'companyId', data[data.length - 1])
    },
    setOrgName(data) {
      this.$set(this.dataQuery, 'companyName', data)
    },
    queryEcharts() {
      let _this = this;
      let chart = echarts.init(document.getElementById('companyEchart'));
      let url = Api.queryRankCompanyScore;
      this.$http.get(url + this.dataQuery.companyId).then((res) => {
        if (res.data.status == 200){
          let data = res.data.data
          _this.options.xAxis[0].data = data.years;
          _this.options.series[0].data = data.calculationBasicsScores;
          _this.options.series[1].data = data.calculationSceneScores;
          _this.options.series[2].data = data.calculationTeamScores;
          _this.options.series[3].data = data.totalScores;
          chart.setOption(_this.options);
          window.onresize = chart.resize;
        }
        if (res.data.status == 202){
          this.$Message.warning("该公司没有审计统计")
        }

      }).catch(e => {
        console.log(e)
        this.$Message.error("数据获取失败")
      })
    },
  },
}
</script>

<style scoped>
@import '../../../../index.css';

/deep/ .table-box .ivu-table-header th {
  position: static;
  border: 1px solid #ddd;
}

.companyEcharts {
  height: 250px;
  text-align: center
}
.card{
  height: 250px;
  overflow-y:auto;
}
</style>
